<template>
    <ul class="menu-c">
        <li v-for="(item, idx) in dataMenu" :key="idx" class="menu-item" @mouseenter="onMouseEnter(idx)" @mouseleave="onMouseLeave(idx)">
            <a class="menu-link" href="javascript:void(0)">
                <span class="txt">{{ item.title }}</span>
                <i class="fa fa-chevron-right" aria-hidden="true" />
            </a>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "menu-c",
        props: {
            dataMenu: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        methods: {
            onMouseEnter: function (idx) {
                this.$emit('mouse-enter', idx)
            },
            onMouseLeave: function (idx) {
                this.$emit('mouse-leave', idx)
            }
        }
    }
</script>

<style scoped lang="stylus">
.menu-c
    min-width 235px
    margin 0
    padding 0
    list-style none
    padding 20px 0
    display flex
    flex-flow column
    height 100%
    // z-index 50
    box-sizing border-box
    background-color rgba(0,0,0,0.6)
    .menu-item
        height 42px
        padding 0 20px 0 25px
        &:hover
            background-color #ff6700
        .menu-link
            width 100%
            color #fefefe
            display flex
            justify-content space-between
            .fa-chevron-right
                color rgba(255,255,255,0.5)
        .menu-link .txt, .menu-link .fa-chevron-right
            display inline-block
            line-height 42px
</style>